.alert.alert-danger(*ngIf='errorMessage')
    strong Error in {{erroredPlugin}}:
    pre {{errorMessage}}


.d-flex
    h3.mb-1 Installed
    button.btn.btn-outline-secondary.btn-sm.ml-auto((click)='openPluginsFolder()')
        i.fas.fa-folder
        span Plugins folder

.list-group.list-group-flush.mt-2
    .list-group-item.d-flex.align-items-center(*ngFor='let plugin of pluginManager.installedPlugins')
        .mr-auto.d-flex.flex-column
            div
                strong {{plugin.name}}
                small.text-muted.ml-1(*ngIf='!plugin.isBuiltin') {{plugin.version}} / {{plugin.author}}
                small.text-warning.ml-1(*ngIf='config.store.pluginBlacklist.includes(plugin.name)') Disabled
            a.text-muted.mb-0((click)='showPluginInfo(plugin)')
                small {{plugin.description}}

        button.btn.btn-primary.ml-2(
            *ngIf='knownUpgrades[plugin.name]',
            (click)='upgradePlugin(plugin)',
            [disabled]='busy[plugin.name] != undefined'
        )
            i.fas.fa-fw.fa-arrow-up(*ngIf='busy[plugin.name] != BusyState.Installing')
            i.fas.fa-fw.fa-circle-notch.fa-spin(*ngIf='busy[plugin.name] == BusyState.Installing')
            span Upgrade ({{knownUpgrades[plugin.name].version}})

        button.btn.btn-link.text-primary.ml-2(
            *ngIf='config.store.pluginBlacklist.includes(plugin.name)',
            (click)='enablePlugin(plugin)'
        )
            i.fas.fa-fw.fa-play

        button.btn.btn-link.ml-2(
            *ngIf='!config.store.pluginBlacklist.includes(plugin.name)',
            (click)='disablePlugin(plugin)'
        )
            i.fas.fa-fw.fa-pause

        button.btn.btn-link.text-danger.ml-2(
            (click)='uninstallPlugin(plugin)',
            *ngIf='!plugin.isBuiltin',
            [disabled]='busy[plugin.name] != undefined'
        )
            i.fas.fa-fw.fa-trash(*ngIf='busy[plugin.name] != BusyState.Uninstalling')
            i.fas.fa-fw.fa-circle-notch.fa-spin(*ngIf='busy[plugin.name] == BusyState.Uninstalling')

div
    h3.mt-4 Available

    .input-group.mb-3
        .input-group-prepend
            .input-group-text
                i.fas.fa-fw.fa-circle-notch.fa-spin(*ngIf='!availablePluginsReady')
                i.fas.fa-fw.fa-search(*ngIf='availablePluginsReady')
        input.form-control(
            type='text',
            [(ngModel)]='_1',
            (ngModelChange)='searchAvailable(_1)',
            placeholder='Search plugins'
        )


    .list-group.list-group-flush.mb-4(*ngIf='availablePlugins$')
        ng-container(*ngFor='let plugin of (availablePlugins$|async)')
            .list-group-item.d-flex.align-items-center(*ngIf='!isAlreadyInstalled(plugin)')
                button.btn.btn-primary.mr-3(
                    (click)='installPlugin(plugin)',
                    [disabled]='busy[plugin.name] != undefined'
                )
                    i.fas.fa-fw.fa-download(*ngIf='busy[plugin.name] != BusyState.Installing')
                    i.fas.fa-fw.fa-circle-notch.fa-spin(*ngIf='busy[plugin.name] == BusyState.Installing')

                div((click)='showPluginInfo(plugin)')
                    div
                        strong {{plugin.name}}
                        small.text-muted.ml-1 {{plugin.version}} / {{plugin.author}}
                        i.fas.fa-check.text-success.ml-1(*ngIf='plugin.isOfficial', title='Official')
                    small.text-muted {{plugin.description}}
